import React, { Component } from 'react'
import axios from 'axios'

export default class About extends Component {
    state = {
        car: {}
    }
    render() {
        const { car } = this.state
        return (
            <div>
                {
                    Object.keys(car).map((item, index) => {
                        return <div key={index}>
                            <h4>
                                {item}
                            </h4>
                            <ul>
                                {
                                    car[item].map((items, indexs) => {
                                        return <li key={indexs}>
                                            { items.Name }
                                        </li>
                                    })
                                }
                            </ul>
                        </div>
                    })
                }
            </div>
        )
    }
    componentDidMount() {
        axios.get('http://baojia.chelun.com/v2-car-getMasterBrandList.html').then(res => {
            let list = res.data.data
            // 去重 (侧边栏的数据)
            let spellingList = []
            list.forEach(item => {
                spellingList.push(item.Spelling.slice(0, 1))
            })
            spellingList = Array.from(new Set(spellingList))


            let car = {}
            list.forEach(item => {
                let spell = item.Spelling.slice(0, 1)
                // 两种情况
                // 2. 该次循环里面已经有key
                if (car[spell]) {
                    car[spell].push(item)
                } else {
                    // 1. 对象没有当前key的时候
                    car[spell] = [item]
                }
            })
            this.setState({
                car
            })
        })

    }
}
